design new BotMatch view

2 files changed, 66 insertions, 6 deletions

diff --git a/web/pw-server/src/routes/bots/[bot_name]/index.svelte b/web/pw-server/src/routes/bots/[bot_name]/index.svelte
index b046754..a5934b6 100644
--- a/web/pw-server/src/routes/bots/[bot_name]/index.svelte
+++ b/web/pw-server/src/routes/bots/[bot_name]/index.svelte
@@ -100,9 +100,7 @@
           <LinkButton href={`/matches?bot=${bot["name"]}&had_errors=true`}>View all</LinkButton>
         </div>
       {:else}
-        <div class="table-placeholder">
-          Nothing here yet
-        </div>
+        <div class="table-placeholder">Nothing here yet</div>
       {/if}
     </div>
   {/if}
@@ -115,9 +113,7 @@
         <LinkButton href={`/matches?bot=${bot["name"]}`}>All matches</LinkButton>
       </div>
     {:else}
-      <div class="table-placeholder">
-        No matches played yet
-      </div>
+      <div class="table-placeholder">No matches played yet</div>
     {/if}
   </div>
 </div>
diff --git a/web/pw-server/src/routes/bots/[bot_name]/matches.svelte b/web/pw-server/src/routes/bots/[bot_name]/matches.svelte
new file mode 100644
index 0000000..a3c97cb
--- /dev/null
+++ b/web/pw-server/src/routes/bots/[bot_name]/matches.svelte
@@ -0,0 +1,64 @@
+<script lang="ts" context="module">
+  import { ApiClient } from "$lib/api_client";
+  import type { Match } from "$lib/api_types";
+
+  const PAGE_SIZE = "50";
+
+  export async function load({ params, fetch }) {
+    try {
+      const apiClient = new ApiClient(fetch);
+      const botName = params["bot_name"];
+
+      let { matches, has_next } = await apiClient.get("/api/matches", { bot: botName });
+
+      // TODO: should this be done client-side?
+      // if (query["after"]) {
+      //   matches = matches.reverse();
+      // }
+
+      return {
+        props: {
+          matches,
+          botName,
+          hasNext: has_next,
+        },
+      };
+    } catch (error) {
+      return {
+        status: error.status,
+        error: new Error("failed to load matches"),
+      };
+    }
+  }
+</script>
+
+<script lang="ts">
+  import LinkButton from "$lib/components/LinkButton.svelte";
+  import BotMatchList from "$lib/components/matches/BotMatchList.svelte";
+  import { apiMatchtoBotMatch } from "$lib/matches";
+
+  export let matches: Match[];
+  export let botName: string | null;
+  // whether a next page exists in the current iteration direction (before/after)
+  // export let hasNext: boolean;
+
+  $: botMatches = matches.map((match) => apiMatchtoBotMatch(botName, match));
+</script>
+
+<div class="container">
+  <BotMatchList {botMatches} />
+</div>
+
+<style lang="scss">
+  .container {
+    max-width: 800px;
+    margin: 0 auto;
+    width: 100%;
+  }
+
+  .page-controls {
+    display: flex;
+    justify-content: center;
+    margin: 24px 0;
+  }
+</style>